<template>
  <template v-if="!props.loading">
    <swiper class="w-full h-full" v-bind="swiperProps">
      <swiper-slide
        class="w-full h-full"
        v-for="(src, idx) in props.imageList"
        :key="idx"
      >
        <img class="w-full h-full" style="object-fit: contain" :src="src" />
      </swiper-slide>
    </swiper>
  </template>
  <template v-else>
    <div class="flex items-center justify-center w-full h-full">
      <loading class="!w-2.5rem" :track-width="6" />
    </div>
  </template>
</template>

<script lang="tsx" setup>
import "swiper/css";
import "swiper/css/autoplay";
import "swiper/css/navigation";
import "swiper/css/pagination";

import { Autoplay, Navigation, Pagination } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/vue";

import Loading from "@/components/Loading/loading.vue";

import { bannerProps } from "./banner";

const props = defineProps(bannerProps);

const swiperProps = computed(() => {
  return {
    modules: [Autoplay, Navigation, Pagination],
    loop: props.imageList.length > 1,
    navigation: true,
    pagination: { clickable: true },
    autoplay: { delay: 4000, disableOnInteraction: false },
  } as InstanceType<typeof Swiper>;
});
</script>
